import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter, Route } from 'react-router-dom';

import Header from './common/header';
import Home from './pages/home';
import Detail from './pages/detail/loadable.js';  // detail 用 react-loadable 处理为一个异步组件
import Login from './pages/login';
import Write from './pages/write';

import store from './store';

class App extends Component {
	render() {
		return (
			<Provider store={store}>
				<BrowserRouter>
					<div>
						<Header />
						<Route path="/" exact component={Home} />
						<Route path='/login' exact component={Login} />
						<Route path='/write' exact component={Write} />
						<Route path="/detail/:id" exact component={Detail} />   {/* Detail 组件被 react-loadable 转化为异步组件，无法获取路由参数 id, 在该组件中使用 withRouter 解决 */}
					</div>
				</BrowserRouter>
			</Provider>
		);
	}
}

export default App;
